<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>向量坐标轴工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>向量坐标轴工具</h1>
            <p>在二维坐标系中添加和可视化向量</p>
        </header>
        
        <div class="main-content">
            <div class="control-panel">
                <div class="vector-input">
                    <h3>添加向量</h3>
                    <div class="input-group">
                        <label for="vectorName">向量名称:</label>
                        <input type="text" id="vectorName" placeholder="例如: v1">
                    </div>
                    <div class="input-group">
                        <label for="vectorX">X 坐标:</label>
                        <input type="number" id="vectorX" step="0.1" placeholder="0">
                    </div>
                    <div class="input-group">
                        <label for="vectorY">Y 坐标:</label>
                        <input type="number" id="vectorY" step="0.1" placeholder="0">
                    </div>
                    <div class="input-group">
                        <label for="vectorColor">颜色:</label>
                        <input type="color" id="vectorColor" value="#ff0000">
                    </div>
                    <button id="addVector" class="btn-primary">添加向量</button>
                </div>
                
                <div class="vector-list">
                    <h3>向量列表</h3>
                    <div id="vectorListContainer">
                        <p class="empty-state">暂无向量</p>
                    </div>
                </div>
                
                <div class="coordinate-settings">
                    <h3>坐标系设置</h3>
                    <div class="input-group">
                        <label for="gridSize">网格大小:</label>
                        <input type="range" id="gridSize" min="20" max="100" value="40">
                        <span id="gridSizeValue">40</span>
                    </div>
                    <div class="input-group">
                        <label for="showGrid">显示网格:</label>
                        <input type="checkbox" id="showGrid" checked>
                    </div>
                    <button id="clearAll" class="btn-secondary">清除所有向量</button>
                </div>
                
                <div class="export-section">
                    <h3>导出图像</h3>
                    <div class="export-buttons">
                        <button id="exportPNG" class="btn-primary">导出 PNG</button>
                        <button id="exportSVG" class="btn-primary">导出 SVG</button>
                    </div>
                </div>
            </div>
            
            <div class="canvas-container">
                <canvas id="coordinateCanvas" width="600" height="600"></canvas>
                <div class="canvas-info">
                    <span id="mouseCoords">鼠标坐标: (0, 0)</span>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>